<template>
	 <view :class=" item ? 'TutorStatusCards':'TutorStatusCards paddingBT'" v-for="(item,index) in tutorList" :key="index">
		 <view class="card item" v-if="isHideButton===0" @tap="TotutorDetails(item)">
		 	<view class="lt">
		 		 <image class="image" :src="ossUrl+item.masterImg"></image>
		 	</view>
		 	<view class="rt"> 
		 		<view class="rt_top">
		 			 <text class="name">{{item.assistantName}}</text>
		 			<!-- <image class="image" src="/static/user/icon_chu.png" v-if="item.grade"></image>
		 			<image class="image" src="/static/user/icon_zhong.png" v-if="item.grade"></image>
		 			<image class="image" src="/static/user/icon_gao.png" v-if="item.grade"></image>
		 			<image class="image" src="/static/user/icon_te.png" v-if="item.grade"></image> -->
		 		</view>
		 		 <view class="appraise">{{item.personalSignature}}</view>	
		 		 <view class="time">
		 					 <tui-icon name="alarm" :size="14"></tui-icon>
		 					 <text v-show="item.begintime">{{item.begintime+'-'+item.endtime}}</text>
		 		 </view>	
		 		 <view class="place">
		 					<tui-icon name="gps" :size="14"></tui-icon>
		 				    <text v-if="item.poi&&item.poi.district">{{item.poi.district+'-'+item.poi.businessAreaName}}</text>
		 		 </view> 
		 		 <view class="price1">
		 		 		<view class="price1_lt">
		 					<text>{{item.rates}}</text>
		 					<text class="priceTime">元/小时</text>
		 				</view> 
		 		 </view>
		 	</view>
		 </view>
		<view class="card item" v-if="isHideButton===1">
			<view class="lt">
				 <image class="image" :src="ossUrl+item.masterImg"></image>
			</view>
			<view class="rt"> 
				<view class="rt_top">
					 <text class="name">{{item.assistantName}}</text>
					 <!-- <image class="image"  src="../../../static/logo.png"></image> -->
				</view>
				 <view class="appraise">{{item.personalSignature}}</view>	
				 <view class="time">
							 <tui-icon name="alarm" :size="14"></tui-icon>
							 <text v-show="item.begintime">{{item.begintime+'-'+item.endtime}}</text>
				 </view>	
				 <view class="place">
							<tui-icon name="gps" :size="14"></tui-icon>
						    <text v-if="item.poi&&item.poi.district">{{item.poi.district+'-'+item.poi.businessAreaName}}</text>
				 </view> 
				 <view class="price1">
				 		<view class="price1_lt">
							<text>{{item.rates}}</text>
							<text class="priceTime">元/小时</text>
						</view>
						<!-- 注释教练邀约 -->
						<view>
							<tui-form-button @click="inviteTutorClick(item)" width="160rpx" height="60rpx" background="#63d6d3" radius="100rpx"><tui-icon margin="4rpx" size="20" color="#fff" name="alarm"></tui-icon>邀约</tui-form-button>
						</view>
				 </view>
			</view>
		</view>
		<view class="card item" v-if="item.status===5">
			<view class="lt">
				 <image class="image" src="../../../static/logo.png"></image>
			</view>
			<view class="rt"> 
				<view class="rt_top">
					 <text class="name">{{item.name}}</text>
					 <image class="image"  src="../../../static/logo.png"></image>
				</view>
				 <view class="appraise">{{item.appraise}}</view>	
				 <view class="time">
							 <image class="image" :src="item.image"></image>
							 <text>{{item.time}}</text>
				 </view>	
				 <view class="place">
							 <image  class="image" :src="item.image"></image>
							 <text>{{item.place}}</text>
				 </view> 
				 <view class="price1">
				 		<view class="price1_lt">
							<text>{{item.price}}</text>
							<text class="priceTime">元/小时</text>
						</view>
						<view>
							<tui-form-button width="160rpx" height="60rpx" background="#CCCCCC" radius="100rpx"><tui-icon margin="4rpx" size="20" color="#fff" name="alarm"></tui-icon>已邀约</tui-form-button>
						</view>
				 </view>
			</view>
		</view>
		<view class="card2 item" v-if="item.status===2">
			<view class="top">
				<view style="display: flex;align-items: center;">
					 <tui-icon margin="4rpx" size="20"   name="order"></tui-icon>
					 <text>订单号：2024110620280002</text>
				</view>
				<text class="invite">邀约中</text>
			</view>
			 <view class="content">
				<view class="content_lt">
					 <image class="image" src="../../../static/logo.png"></image>
				</view>
				<view class="content_rt">
					<view class="tp">
						<view class="tp_lt">
							<text>王小贝</text>
							<tui-icon margin="20rpx" size="20"   name="order"></tui-icon>
						</view>
						<text class="tp_rt">￥186</text>
					</view>
					<view class="ct">
						<text class="ct_lt">台球</text>
						<text class="ct_rt">2小时</text>
					</view>
					<view class="bt">
						<text>￥98/小时</text>
					</view>
				</view> 
			 </view>
			 <view class="bottom">
			 	<text>下单时间：2024-11-05 12:09</text>
				<view class="total"><text>合计:</text><text class="totalPrice">￥186</text></view>
			 </view>
			 <view class="footer">
			 	<view class="button_item">
					<tui-form-button width="160rpx" size="28" height="60rpx" plain background="#63d6d3" color="#63d6d3" radius="100rpx">取消订单</tui-form-button>
					<tui-form-button width="160rpx" size="28" height="60rpx" background="#63d6d3" radius="100rpx">联系教练</tui-form-button>
				</view>
			 </view>
		</view>
		<view class="card4 item" v-if="item.status===4">
			<view class="top">
				<view style="display: flex;align-items: center;">
					 <tui-icon margin="4rpx" size="20" color="#c06c58"   name="order"></tui-icon>
					<view style="color: #d46c4b;display: flex;align-items: center">
						 <text>订单金额：</text>
						 <text style="font-size: 36rpx;">￥98</text>
					</view>
				</view>
				<text class="invite">待确认</text>
			</view>
			 <view class="content">
				<view class="content_lt">
					 <image class="image" src="../../../static/logo.png"></image>
				</view>
				<view class="content_rt"> 
					 <text class="tp_lt">忧伤的爱德华</text>  
					<view class="ct">
						<view><text class="ct_tp">邀约类型：台球</text></view>
						<view><text class="ct_c">邀约类型：温江区棕榈长滩</text></view>
						<view><text class="ct_bt">邀约类型：无</text> </view>
					</view>
				</view> 
			 </view>
			 <view class="bottom">
			 	<text>预约时间：2024-11-05 09:00-11:00</text> 
			 </view>
			 <view class="footer">
				<text class="footer_lt">与其他订单时间临近!</text>
			 	<view class="button_item">
					<tui-form-button width="160rpx" size="28" height="60rpx" plain background="#63d6d3" color="#63d6d3" radius="100rpx">拒绝</tui-form-button>
					<tui-form-button width="160rpx" size="28" height="60rpx" background="#63d6d3" radius="100rpx">接受邀约</tui-form-button>
				</view>
			 </view>
		</view>
		<view class="card" v-if="item.status===3">
			<view class="lt">
				 <image class="image" src="../../../static/logo.png"></image>
			</view>
			<view class="rt">
				 <text class="name">{{item.name}}</text>		
				 <view class="appraise">{{item.appraise}}</view>	
				 <view class="time">
					 <image class="image" :src="item.image"></image>
					 <text class="text">{{item.time}}</text>
				 </view>	
				 <view class="place">
						 <image class="image" :src="item.image"></image>
						 <text class="text">{{item.place}}</text>
				 </view>
				 <view class="price3">
				 		<text>{{item.price}}</text>
				 		<text class="priceTime">元/小时</text>
				 </view>
			</view>
		</view>
	 </view>
</template>

<script>
	export default {
		name: 'TutortutorStatusCard',
		emits: ['TotutorDetails','inviteTutor'],
		props: {
			//教练信息
			tutorList:{
				type: Array,
				default:[]
			},
			// 是否显示操作按钮 0 不显示 1显示操作按钮
			isHideButton: {
				type: Number,
				default: 0
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			}
			
		},
		data() {
			return {
				 // status:状态：1：审核中；2：驳回；3：接单中；4：下线；5：黑名单
			};
		},
		methods: { 
			  TotutorDetails(item){ 
				  this.$emit('TotutorDetails',item)
			  },
			  inviteTutorClick(item){
				  console.log(item,'教练信息')
				  let ids={
				  	categoryId:item.categoryId,
				  	assistantId:item.id,
				  	merchantId:item.merchantId
				  } 
				  this.$emit('inviteTutor',ids)
			  }
		}
	};
</script>

<style  lang="scss" scoped> 
	.TutorStatusCards{
		background-color: #fff; 
		padding-top:30rpx;
		.item{
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(214,214,214,0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
		.card{
			display: flex; 
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			.lt{
				width: 200rpx;
				height: 240rpx;
				overflow: hidden; /* 防止图片溢出 */ 
				border-radius: 20rpx;
				.image{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.rt{
				padding-left: 20rpx; 
				width: calc(100% - 180rpx);
				.rt_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.image{
					width: 28rpx;
					height: 28rpx;
				}
				.name{
					font-weight: bold;
					font-size: 28rpx;
				}
				.appraise{
					width: auto;
					background-color: #fef8e4;
					padding: 2rpx 10rpx;
					border-radius: 20rpx;
					width: 60%;
					text-align: center;
					font-size: 20rpx;
					color: #f4ba74;
					margin: 10rpx 0;
				}
				.time{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					color: #bbbbbb;
					margin-top: 20rpx;
					.text{
						padding-left: 4rpx;
					}
				}
				.place{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					color: #bbbbbb; 
					 margin: 10rpx 0;
					.text{
						padding-left: 4rpx;
					}
				}
				.price3{
					color: red; 
					font-size: 48rpx; 
					display: flex;
					align-items: center;
					.priceTime{
						color:#e47e71;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
				.price1{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price1_lt{
						color: red;
						font-size: 48rpx; 
						display: flex;
						align-items: center;
						.priceTime{
							color:#e47e71;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}
					 
				}
			}
		}
		.card2{ 
			background-color: #fff;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #b2b3b3;
				padding: 20rpx;
				font-size: 24rpx;
				border-bottom: 2rpx solid #f6f6f6;
				.invite{
					color: #ed6e5e;
				}
			}
			.content{
				 padding: 20rpx;
				 display: flex;
				.content_lt{
					width: 160rpx;
					height: 160rpx;
					overflow: hidden; /* 防止图片溢出 */ 
					border-radius: 20rpx;
					.image{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.content_rt{
					width: calc(100% - 140rpx);
					padding-left: 20rpx;
					.tp{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.tp_lt{
							font-weight: 600;
							font-size: 36rpx;
						}
					}
					.ct{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16rpx 0;
						.ct_lt{
							background-color: #fef8e6;
							color: #f6b455;
							padding: 4rpx 8rpx;
							font-size: 28rpx;
							border-radius: 10rpx;
						}
					}
					.bt{
						color: #777777;
						font-size: 28rpx;
					}
				}
				 
			}
			.bottom{ 
				color: #b0b1b1; 
				font-size: 24rpx; 
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				.total{
					color: #646464;
					display: flex;
					align-items: center;
				}
				.totalPrice{
					color: #e25e42;
					font-weight: bold;
					font-size: 36rpx;
				}
			}
			.footer{
				 display: flex;
				 align-items: center;
				 justify-content: flex-end;
				width:calc(100% - 40rpx)  ;
			    padding: 20rpx;
				.button_item{
					display: flex;
					align-items: center; 
					justify-content: space-between;
					width: 55%;
				}
			}
		}
		.card4{
			background-color: #fff;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #b2b3b3;
				padding: 20rpx;
				font-size: 24rpx;
				border-bottom: 2rpx solid #f6f6f6;
				.invite{
					color: #ed6e5e;
				}
			}
			.content{
				 padding: 20rpx;
				 display: flex;
				.content_lt{
					width: 160rpx;
					height: 160rpx;
					overflow: hidden; /* 防止图片溢出 */ 
					border-radius: 20rpx;
					.image{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.content_rt{
					width: calc(100% - 140rpx);
					padding-left: 20rpx;
					.tp_lt{
						font-weight: 600;
						font-size: 36rpx;
					}
					.ct{ 
						padding: 16rpx 0;
					    font-size: 24rpx;
						 
					}
					.bt{
						color: #777777;
						font-size: 28rpx;
					}
				}
				 
			}
			.bottom{ 
				color: #b0b1b1; 
				font-size: 24rpx; 
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 20rpx;
				.total{
					color: #646464;
					display: flex;
					align-items: center;
				}
				.totalPrice{
					color: #e25e42;
					font-weight: bold;
					font-size: 36rpx;
				}
			}
			.footer{
				 display: flex;
				 align-items: center;
				 justify-content: space-between;
				 
			    padding: 20rpx;
				.button_item{
					display: flex;
					align-items: center; 
					justify-content: space-between;
					width: 55%;
				}
				.footer_lt{
					font-size: 24rpx;
					color: #e9b87a;
				}
			}
		}
	}
	.paddingBT{
		padding: 0!important;
	}
</style>